<template>
  <div ref="chartDom" style="width: 100%;height:100%;"></div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: "AssetTable1",
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.loadData();
    this.initChart();
  },
  methods: {
    loadData() {
      request({
        url: '/asset/assetTypeSum',
        method: 'get'
      }).then(response => {
        if (response && response.data){
          response.data.forEach(item => {
            this.tableData.push({
              name: item.assetType,
              value: item.sum
            })
          })
          this.initChart();
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('加载数据失败')
      })
    },
    initChart() {
      const self = this;
      const chartDom = this.$refs.chartDom;
      const chart = this.$echarts.init(chartDom);
      var option = {
        backgroundColor: '#fff', // 设置背景颜色为白色
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'], // 设置环形图的内外半径
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter: '{b}: {d}%'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: self.tableData
          }
        ]
      };
      chart.setOption(option);
    }
  }
}
</script>

<style scoped>

</style>